import { createStore } from 'vuex'
import { getUserMenu, userInfo, userLogin, userLogout } from '@/api/user'
import router from '@/router'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import { getKaptcha, getToken, setToken } from '@/store/cookie/cookie'
import { getPermissionList } from '@/api/permission'

export default createStore({
  state: {
    avatar: '',
    authorization: '',
    roles: [],
    routes: [],
    permissions: [],
    userInfo: undefined
  },
  getters: {
    permissions: state => state.permissions,
    roles: state => state.roles,
    routes: state => state.routes,
    userInfo: state => state.userInfo,
    Authorization: state => this.state.Authorization
  },
  mutations: {
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_ROUTES: (state, routes) => {
      state.addRoutes = routes
      state.routes = routes
    },
    SET_USERINFO: (state, user) => {
      state.userInfo = user
      // console.log('user', user)
      // console.log(state.userInfo)
    },
    SET_AUTHORIZATION: (state, token) => {
      state.authorization = token
    }
  },
  actions: {
    // 加token
    set_token ({ commit }) {
      commit('SET_AUTHORIZATION', getToken())
    },
    del_token ({ commit }) {
      commit('SET_AUTHORIZATION', null)
      commit('SET_USERINFO', undefined)
    },
    // 登录
    login ({ commit }, user) {
      console.log({ ...user, kaptchaOwner: getKaptcha() })
      console.log('验证码', getKaptcha())
      const kaptcha = getKaptcha()
      if (kaptcha === null || kaptcha === undefined) {
        ElMessage({
          showClose: true,
          grouping: true,
          message: '验证码已失效，请点击更新验证码',
          type: 'error'
        })
        return
      }
      userLogin({ ...user, kaptchaOwner: kaptcha }).then((val) => {
        console.log('登录')
        console.log(val)
        setToken(val.data)
        if (val.data) {
          commit('SET_AUTHORIZATION', val.data)
          userInfo().then((val) => {
            commit('SET_USERINFO', val.data)
            console.log(val.data)
            getUserMenu().then((val) => {
              console.log(val.data)
              if (val.data) {
                commit('SET_ROUTES', val.data)
              } else {
                commit('SET_ROUTES', undefined)
              }
            })
            router.push('/').then(() => {
              // this.$message()
              ElMessage({
                showClose: true,
                grouping: true,
                message: '登录成功',
                type: 'success'
              })
            })
          })
        }
      })
    },
    // 登出
    logout ({ commit }) {
      commit('SET_USERINFO', undefined)
      commit('SET_ROUTES', undefined)
      userLogout().then(() => {
        ElMessage({
          showClose: true,
          grouping: true,
          message: '已退出',
          type: 'success'
        })
        router.push('/').then(r => { console.log('以推出') })
      })
    },
    // 获得用户菜单及权限信息
    getUserMenu () {

    },
    getUserInfo ({ commit }) {
      getPermissionList().then((val) => {
        console.log('permission', val)
        commit('SET_PERMISSIONS', val.data)
      })
      userInfo().then((val) => {
        // console.log(val)
        if (val.data) {
          commit('SET_USERINFO', val.data)
        } else {
          commit('SET_USERINFO', undefined)
        }
      })
      getUserMenu().then((val) => {
        console.log(val.data)
        if (val.data) {
          commit('SET_ROUTES', val.data)
        } else {
          commit('SET_ROUTES', undefined)
        }
      })
    }
  },
  modules: {

  }
})
